<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none
        }
        .box{
            /* width: 480px; */
            display: flex;
            /* margin: 0 auto; */

        }
        .box1{
            width: 480px;
            height: 480px;
            box-sizing: border-box;
            border:  2px solid #333;
            position: relative;
            overflow: hidden;
        }
        .box1 .box_small{
            width: 240px;
            height: 240px;
            background-color: rgba(0,0,0,0.2);
            position: absolute;
            top: 0;
            left: 0;
        }
        .box2{
            width: 480px;
            height: 480px;
            box-sizing: border-box;
            border:  2px solid #333;
            position: relative;
            overflow: hidden;
          
        }
        .box2>img{
            width: 960px;
        }
        .active{
              display: none;
        }
        #box{
            width: 480px;
            height: 600px;
            border: 1px solid #333;
        }
        #box .head{
            display: flex;
            box-sizing: border-box;
        }
        #box .head img{
            width: 118px;
            height: 120px;
            
            border:  1px solid #333;
            
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            <img src="./img/cw1.png" alt="">
            <div class="box_small">

            </div>
        </div>
        <div class="box2 active" >
            <img id="bigImg" src="./img/cw1.png" alt="">
        </div>
    </div>

    <div id="box">
        <div class="main">
                <img src="./img/cw1.png" alt="">
        </div>
        <ul class="head">
            <li><img src="./img/cw1.png" alt=""></li>
            <li><img src="./img/cw2.png" alt=""></li>
            <li><img src="./img/cw3.png" alt=""></li>
            <li><img src="./img/cw4.png" alt=""></li>
        </ul>
        
    </div>

    <script>
        let mask=document.querySelector(".box_small");
        let box2=document.querySelector(".box2");
        let box1=document.querySelector(".box1");
        let bigImg=document.getElementById("bigImg");

        let list = document.querySelectorAll(".head > li");
        let main = document.querySelector(".main");
        let lastIndex = 0; // 设置上一步操作的下标

        //  head容器每个li绑定事件
        list.forEach(function (item, index) {
            item.onmousemove = function () {
                lastIndex = index;
                main.innerHTML = item.innerHTML;

            }
        });
    //    console.log(main);
       

        mask.addEventListener("mousemove",function(e){
            let x = e.clientX - mask.offsetWidth / 2;
            let y = e.clientY - mask.offsetHeight / 2;
            mask.style.transform = `translate(${x}px, ${y}px)`;
            box2.classList.remove("active");
            var a =x*(bigImg.offsetWidth-box2.offsetWidth)/(box1.offsetWidth-mask.offsetWidth);
            var b=y*(bigImg.offsetWidth-box2.offsetWidth)/(box1.offsetWidth-mask.offsetWidth);

            bigImg.style.marginLeft=-a+"px";
            bigImg.style.marginTop=-b+"px";
            // fn1();
        });
         function fn1(){
            var a =x*(bigImg.offsetWidth-box2.offsetWidth)/(box1.offsetWidth-mask.offsetWidth);
            var b=y*(bigImg.offsetWidth-box2.offsetWidth)/(box1.offsetWidth-mask.offsetWidth);

            bigImg.style.marginLeft=-a+"px";
            bigImg.style.marginTop=-b+"px";
        };
        
        mask.addEventListener("mouseleave",function(e){
            box2.classList.add("active")
        })


    </script>
</body>
</html>